<template>
	<view class="page-body">
		<view class="header ">
			<view class='imgbg_out'>
				<view class="innerbg">
				<image :src='BackgroundUrl' mode="aspectFill"></image>
				</view>
			</view>
			<view class="status"></view>
			<view class="back" @click.stop="goBack">
				<view class="icon xiangqian" ></view>
				<view class="middle">店铺详情</view>
				<view class="icon-btn" ></view>
			</view>
			<view class="shopMsg" >
				<view class='store' >
					<view class='floor1 flex'>
						<view class='img flex0'>
							<image :src='shopMsg.business_logo'></image>
						</view>
						<view class=''>
							<view class='store-name' @click="goShopDec">{{shopMsg.name}} <text class="icon xiangyou"></text></view>
							<view class='store-d'>
								<text class=''>{{shopMsg.collect_num}}收藏</text>
							</view>
						</view>
						<view class='store-focus' @click='bindFocusOn'>
							<text :class="['iconfont', IsFocus?'icon-foucs':'icon-unfocus']"></text><text> {{IsFocus?'已收藏':'收藏'}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="shopMsg floor2" >
				<view class='store' >
					<view class='line flex'>
						<view class="l flex0">店铺简介</view>
						<view class="r">{{shopMsg.business_desc}}</view>
					</view>
					<view class='line flex'>
						<view class="l flex0">店铺地址</view>
						<view class="r">{{shopMsg.contact_address}}</view>
					</view>
					<view class='line flex'>
						<view class="l flex0">联系方式</view>
						<view class="r">{{shopMsg.contact_name}}{{shopMsg.contact_tel}}</view>
					</view>
				</view>
				</view>
			</view>
			<view class="shopMsg floor3" >
				<view class='store' >
					<view class='line flex' @click="lookAll">
						去看看全部商品 <text class="icon xiangyou"></text>
					</view>
				</view>
				</view>
			</view>
		</view>
		</view>
		
	</view>
</template>

<script>
	import {
	    mapState,
	    mapMutations
	} from 'vuex'
	import {Pages} from '@/utils/utils.js'
	var that;
	export default {
		data() {
			return {
				BackgroundUrl: "/static/img/q.jpg",
				Logo: "",
				ShopName: "店铺名称",
				ShopFavoritesCount: "100",
				IsFocus:false,
				Address: "",
				Phone: "1388784564",
				loadingText: '正在加载...',
				//控制渐变标题栏的参数
				beforeHeaderzIndex: 11,//层级
				afterHeaderzIndex: 10,//层级
				beforeHeaderOpacity: 1,//不透明度
				afterHeaderOpacity: 0,//不透明度
				sid:"",
				shopMsg:""
			}
		},
		onLoad(options) {
			that = this;
			// this.shopMsg = JSON.parse(decodeURIComponent(options.shopMsg));
			uni.getStorage({
				key:'shopmsg',
				success: (res) => {
					that.shopMsg = res.data
				},
			})
			this.sid = this.shopMsg.id;
			this.IsFocus = this.shopMsg.is_business
		},
		methods: {
			goBack(){
				uni.navigateBack({
					delta:1
				})
			},
			lookAll(){
				this.goBack()
			},
			bindFocusOn(){
				if(this.IsFocus){
					this.$showToast('您已收藏');
					return true;
				}
				if(this.hasLogin){
					this.$https.POST({
						url:'/collect/collectGoods',
						data:{
							bid:that.sid,
							type:1
						},
						success(res){
							that.IsFocus = that.IsFocus?false:true;
							that.$set(that.shopMsg,'collect_num',that.shopMsg.collect_num++)
						}
					})
				}else{
					this.$showToast("请先登录")
					setTimeout(function() {
						uni.navigateTo({
							url:"/pages/login/login"
						})
					}, 1000);
				}
			},
		},
		computed:mapState({
			hasLogin(state){
				return state.hasLogin==""?false:true
			},
			hasNetwork(state){
				return state.isConnected
			}
		})
	}
</script>

<style lang="scss">
	page{background-color: #f6f6f6;}
	.shopTop {
		position: relative;
		overflow: hidden;
		color: #fff;
	}
	.aftera{padding: 0 4%;box-sizing: border-box;}
	.status {
		width: 100%;
		height: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height); //覆盖样式
		/*  #endif  */
	}
	.header {
		width: 100%; 
		color: #fff;
		// background: rgba(0, 0, 0, 0.5);
			.back {
				position: relative;
				z-index: 1;
				padding: 0 20upx;
				width:auto;
				height: 100upx;
				display: flex;
				align-items: center;
				flex-shrink: 0;
				.icon {
					width: 60upx;
					height: 60upx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 42upx;
					color: #fff;
				}
			}
			.middle {
				width: 100%;
				font-size: 32upx;
				height: 90upx;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 7%;
			}
			.icon-btn {
				width: 70upx;
				height: 80%;
				text-align: center;
				.iconfont {
					width: 60upx;
					height: 50upx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 36upx;
				}
				.text{font-size: 24upx;}
			}
	}
	
	.imgbg_out {
		width: 100%;
		position: fixed;
		left: 0;
		z-index:0;
		.innerbg{
			position: absolute;
			top: 0; left: 0;
			height: 440upx;
			background: #666;
			width: 100%;overflow:hidden;
			&::before,&::after{
				content: "";
				display: block;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
			}
			&::before{
				background: rgba(0,0,0,.5);
				z-index: 1;
			}
			&::after{
				z-index: 2;
				background: -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(80%,hsla(0,0%,100%,.8)),to(#f7f7f7));
				background: -webkit-linear-gradient(top,transparent,hsla(0,0%,100%,.8) 80%,#f7f7f7);
				background: linear-gradient(180deg,transparent 0,hsla(0,0%,100%,.8) 80%,#f7f7f7);
				top: 220upx;
			}
		}
	    image {
			width: 100%;
		}
		
	}
	
	.shopMsg {
		width: 100%;
		padding-bottom: 16upx;
		box-sizing: border-box;
		padding: 0 20upx;
		margin-top: 30upx;
	}

	.store {
		padding: 20upx;
		font-size: 28rpx;
		position: relative;
		margin-bottom: 20rpx;
		background: #fff;
		color: #232323;
		border-radius: 10upx;
		.iconfont{margin-right: 6upx;}
	}

	.store .img {
		width: 116rpx;
		height: 116rpx;
		border-radius: 10rpx;
		overflow: hidden;
		background: #ccc;
		margin-right: 30rpx;
	}

	.store .img image {
		width: 116rpx;
		height: 116rpx;
	}

	.store .store-name {
		font-size: 32rpx;
		padding: 5rpx 0 10rpx;
		width: 400rpx;
		height: 40rpx;
		overflow: hidden;
	}
	.store .store-name .xiangyou{
		font-size: 28upx;color: #fff;
	}
	.store-d text {
		margin-right: 20rpx;
	}

	.store .mark {
		background: #ff5722;
		padding: 3rpx 5rpx;
		color: #fff;
		line-height: 1;
		font-size: 22rpx;
		border-radius: 7rpx;
	}

	.store-focus {
		position: absolute;
		right: 30rpx;
		top: 52rpx;
		font-size: 26rpx;
		background: $maincolor;
		line-height: 54rpx;
		padding: 0 15rpx;
		border-radius: 30rpx;
		color: #fff;
		width:130upx;
		text-align:center;
	}

	.store-focus .icon-unfocus,
	.store-focus .icon-focus {
		font-size: 30rpx;
		margin-right: 6rpx;
	}

	.storeContact {
		justify-content: space-between;
		padding: 0 30rpx;
		line-height: 48rpx;
	}

	.storeContact .icon__locate,
	.icon-phone {
		font-size: 38rpx;
		padding-right: 5rpx;
	}
	.floor2 .store,.floor3 .store{padding: 0;}
	.line{
		padding: 22rpx ;
		border-bottom: 1px solid #F6F6F6;
		box-sizing: border-box; line-height:40upx;
		.l{
			width: 150rpx;	
		}
		.r{color: #919191;}
	}
	.line:nth-last-of-type(1){
		border-bottom: none;
	}
	.floor3 .line{
		justify-content: center;
		color: $maincolor;
		font-size: 32rpx;
		.xiangyou{font-size: 28rpx;color: $maincolor;}
	}
</style>
